<template>
  <div style="padding: 10px">
    <!--使用draggable组件,点击第一列数字进行拖动，其他列拖拽无效-->
    <table class="itxst" :ref="draggableGridRef">
      <draggable
        v-model="dragList"
        :animation="animation"
        force-fallback="true"
        handle=".move"
        @start="onStart"
        @end="onEnd"
        :move="onMove"
      >
        <tr v-for="item in dragList" :key="item.id">
          <td style="width: 50px" class="move">{{ item.id }}</td>
          <td style="width: 250px">{{ item.name }}</td>
        </tr>
      </draggable>
    </table>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "vueDraggable",
  props: {
    //自定义ref
    draggableGridRef: {
      type: String,
      default() {
        return "vueDraggableGrid";
      },
    },
    //标签数据
    dragData: {
      type: Array,
      default() {
        return [];
      },
    },
    group: {
      type: [String],
      default() {
        return "";
      },
    },
    animation: {
      type: [Number],
      default() {
        return 1000;
      },
    },
    filter: {
      //禁止拖动元素的样式名称
      type: [String],
      default() {
        return "";
      },
    },
    which: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      dragList: this.dragData && this.dragData.length > 0 ? this.dragData : [],
    };
  },
  components: {
    draggable,
  },
  created() {},
  methods: {
    onMove(evt) {
      console.log(evt);
      return true;
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    onStart(evt) {
      console.log(evt, "start...");
    },
    onEnd(evt) {
      console.log(evt, "end....");
      evt.item; //可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    },
  },
};
</script>

<style scoped>
/*被拖拽对象的样式*/
table.itxst {
  color: #333333;
  border: #ddd solid 1px;
  border-collapse: collapse;
}
table.itxst th {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #dedede;
}
table.itxst td {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #ffffff;
}
table.itxst tr {
  cursor: pointer;
}
table.itxst td.move:hover {
  cursor: move;
}
</style>
